<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
.red{
	width: 100px;
	height: 100px;
	background: red;
}
.blue{
	width: 200px;
	height: 200px;
	background: blue;
}
		</style>
	</head>
	<body>
		<div id="box"  style="border: 1px solid rosybrown;">
		事件绑定分为两种：1传统事件绑定（内联模型，脚本模型）
		2现代事件绑定（DOM2级模型）现代事件绑定在传统绑定上提供了更强大更方便的功能。
		<br />
	
		</div>
	</body>
	<script type="text/javascript">
		var box = document.getElementById('box');
		
		//传统绑定
		//问题：1如果一个页面有多个js，可能发生覆盖。需要处理  2 this 3可读性
		
		//事件切换器
	
		box.onclick = function(){
		 
		   box.onclick = toRed;
		
		};
		
	
		function toRed(){
			this.className = 'red';
			this.onclick = toBlue;
		}
 		 function toBlue(){
  			this.className ='blue';
  			this.onclick = toRed;
        }
		
		
		
		//添加函数事件
		//obj相当于window，type相当于事件onload ,fn相当于function(){}
		function addEvent(obj,type,fn){
			
			//用于保存上一个事件
			var saved = null;
			//判断事件是否存在
			if(typeof obj['on'+type]=='function'){
				saved = obj['on'+type] ;  //保存上一个事件
			  
			}
		   
		
		//执行事件
	    if(saved){  //存在
	    	saved()  //
	    }
	    	fn.call(this);//将this传递过来
	  
	  //下面的无法执行？？
	/*  obj['on'+type] =function(){
	  	if(saved){
	  		saved();
	  	}
	  	fn.call(this);
	  }
	  */
	  
		}
		
		//移除事件函数(此处全部删除事件如果删除指定事件应该遍历)
		function removeEvent(obj,type){
			if(obj['on'+type]) {
				obj['on'+type]=null;
			}
			
		}
		
		//注册同名函数时也该遍历
		
		
		
		addEvent(window,'load',function(){
			alert('第一个');
		});
		addEvent(window,'load',function(){
			alert('第二个');
		});
		addEvent(window,'load',function(){
			alert('第三个');
		});
		
		
		//ps 对象操作可以使用数组操作来完成 window.onload =window['onload']
		window['onload']= function(){
			alert('数组对象')
		}
	</script>
</html>
